export default function HelpPage() {
  const faqs = [
    {
      category: '购买相关',
      questions: [
        {
          q: '什么是箱野盲盒？',
          a: '箱野盲盒是由回收的滞留包裹重新包装而成的神秘盲盒。每个盒子都经过严格筛选和安全检测，确保内含物品的质量和安全性。'
        },
        {
          q: '如何购买盲盒？',
          a: '您可以在商城页面浏览不同类型的盲盒，选择心仪的商品加入购物车，然后进行结算支付。支付完成后，我们会在1-3个工作日内发货。'
        },
        {
          q: '盲盒里面都有什么？',
          a: '盲盒内容是随机的，可能包含数码产品、生活用品、美妆护肤、潮玩收藏等各类商品。我们会在商品页面标明可能的物品类型和价值范围。'
        },
        {
          q: '支持哪些支付方式？',
          a: '我们支持微信支付、支付宝、银行卡等多种支付方式，确保您的支付安全便捷。'
        }
      ]
    },
    {
      category: '开箱相关',
      questions: [
        {
          q: '如何开箱？',
          a: '收到盲盒后，在用户中心的订单页面点击"立即开箱"，即可进入开箱页面体验专属的开箱动画，查看您的惊喜商品。'
        },
        {
          q: '开箱结果是随机的吗？',
          a: '是的，开箱结果完全随机生成，我们使用公平的算法确保每位用户都有机会获得高价值商品。不同价位的盲盒有不同的大奖概率。'
        },
        {
          q: '可以分享开箱结果吗？',
          a: '当然可以！开箱完成后，您可以将结果分享到社交媒体，与朋友分享您的惊喜时刻。'
        },
        {
          q: '开箱记录在哪里查看？',
          a: '您可以在用户中心的"开箱记录"标签页查看所有历史开箱结果，包括商品详情、价值和满意度评分。'
        }
      ]
    },
    {
      category: '售后服务',
      questions: [
        {
          q: '如果对开箱结果不满意怎么办？',
          a: '我们提供7天无理由退货服务。如果您对开箱结果不满意，可以在收货后7天内申请退货，我们会及时处理。'
        },
        {
          q: '商品有质量问题怎么办？',
          a: '如果收到的商品存在质量问题，请立即联系客服，我们会为您安排换货或退款。所有商品都有质量保障。'
        },
        {
          q: '如何申请售后？',
          a: '您可以通过客服电话15328965713、在线客服或发送邮件至1437594522@qq.com申请售后服务。'
        },
        {
          q: '退款多久到账？',
          a: '退款申请审核通过后，款项会在3-7个工作日内原路返回您的支付账户。'
        }
      ]
    },
    {
      category: '账户安全',
      questions: [
        {
          q: '如何保护账户安全？',
          a: '请妥善保管您的账户密码，不要在公共场所登录账户，定期更新密码。如发现异常登录，请立即联系客服。'
        },
        {
          q: '忘记密码怎么办？',
          a: '在登录页面点击"忘记密码"，输入您的手机号或邮箱，我们会发送重置密码的链接或验证码。'
        },
        {
          q: '如何修改个人信息？',
          a: '登录后进入用户中心，点击"个人资料"标签页即可修改您的个人信息。'
        }
      ]
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 页面头部 */}
      <div className="bg-gradient-to-r from-blue-500 to-purple-600 py-16">
        <div className="max-w-6xl mx-auto px-4 text-center text-white">
          <h1 className="text-4xl font-bold mb-4">帮助中心</h1>
          <p className="text-xl opacity-90">有问题？我们来帮您解答</p>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-4 py-12">
        {/* 快速联系 */}
        <div className="grid md:grid-cols-3 gap-6 mb-12">
          <div className="bg-white rounded-lg p-6 text-center shadow-sm border-l-4 border-green-500">
            <div className="text-3xl mb-3">📞</div>
            <h3 className="font-semibold text-gray-800 mb-2">电话客服</h3>
            <p className="text-gray-600 mb-3">15328965713</p>
            <p className="text-sm text-gray-500">工作时间：9:00-18:00</p>
          </div>
          
          <div className="bg-white rounded-lg p-6 text-center shadow-sm border-l-4 border-blue-500">
            <div className="text-3xl mb-3">💬</div>
            <h3 className="font-semibold text-gray-800 mb-2">在线客服</h3>
            <p className="text-gray-600 mb-3">即时回复</p>
            <button className="text-blue-600 hover:text-blue-700 font-medium">
              开始对话
            </button>
          </div>
          
          <div className="bg-white rounded-lg p-6 text-center shadow-sm border-l-4 border-orange-500">
            <div className="text-3xl mb-3">📧</div>
            <h3 className="font-semibold text-gray-800 mb-2">邮件咨询</h3>
            <p className="text-gray-600 mb-3">1437594522@qq.com</p>
            <p className="text-sm text-gray-500">24小时内回复</p>
          </div>
        </div>

        {/* 搜索框 */}
        <div className="bg-white rounded-lg p-6 shadow-sm mb-8">
          <div className="flex space-x-4">
            <input
              type="text"
              placeholder="搜索问题关键词..."
              className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <button className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition-colors">
              搜索
            </button>
          </div>
        </div>

        {/* FAQ列表 */}
        <div className="space-y-8">
          {faqs.map((category, categoryIndex) => (
            <div key={categoryIndex} className="bg-white rounded-lg shadow-sm overflow-hidden">
              <div className="bg-gray-50 px-6 py-4 border-b">
                <h2 className="text-xl font-bold text-gray-800">{category.category}</h2>
              </div>
              <div className="divide-y divide-gray-200">
                {category.questions.map((faq, faqIndex) => (
                  <details key={faqIndex} className="group">
                    <summary className="flex justify-between items-center px-6 py-4 cursor-pointer hover:bg-gray-50 transition-colors">
                      <span className="font-medium text-gray-800">{faq.q}</span>
                      <span className="text-gray-400 group-open:rotate-180 transition-transform">
                        ▼
                      </span>
                    </summary>
                    <div className="px-6 pb-4 text-gray-600 leading-relaxed">
                      {faq.a}
                    </div>
                  </details>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* 联系我们部分 */}
        <div className="mt-12 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-lg p-8 text-center">
          <h2 className="text-2xl font-bold text-black mb-4">
            没有找到您要的答案？
          </h2>
          <p className="text-black/80 mb-6">
            我们的客服团队随时准备为您提供帮助
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button className="bg-black text-white font-bold py-3 px-8 rounded-lg hover:bg-gray-800 transition-colors">
              📞 联系客服
            </button>
            <button className="bg-white/20 border-2 border-black text-black font-bold py-3 px-8 rounded-lg hover:bg-white/30 transition-colors">
              📧 发送邮件
            </button>
          </div>
        </div>

        {/* 自助服务 */}
        <div className="mt-12">
          <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">自助服务</h2>
          <div className="grid md:grid-cols-4 gap-6">
            <a href="/profile" className="bg-white rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
              <div className="text-3xl mb-3">📦</div>
              <h3 className="font-semibold text-gray-800 mb-2">查看订单</h3>
              <p className="text-sm text-gray-600">跟踪订单状态</p>
            </a>
            
            <a href="/profile" className="bg-white rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
              <div className="text-3xl mb-3">🎁</div>
              <h3 className="font-semibold text-gray-800 mb-2">开箱记录</h3>
              <p className="text-sm text-gray-600">查看历史开箱</p>
            </a>
            
            <a href="/profile" className="bg-white rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
              <div className="text-3xl mb-3">👤</div>
              <h3 className="font-semibold text-gray-800 mb-2">个人资料</h3>
              <p className="text-sm text-gray-600">修改个人信息</p>
            </a>
            
            <a href="/about" className="bg-white rounded-lg p-6 text-center shadow-sm hover:shadow-lg transition-shadow">
              <div className="text-3xl mb-3">ℹ️</div>
              <h3 className="font-semibold text-gray-800 mb-2">关于箱野</h3>
              <p className="text-sm text-gray-600">了解我们的理念</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}